import React, { Component } from 'react';
import { createPortal } from 'react-dom';
import ReactEcharts from 'echarts-for-react';
import darkEchartsTheme from '../../config/theme/darkEchartsTheme';
import echarts from 'echarts';

const modalRoot = document.getElementById('dialog-root');

class LivelyhoodPayTopChart extends Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('technologyCollegeNumChart');
    this.state = {
      chartOption: undefined,
      chartHeight: 260,
    };
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
    echarts.registerTheme('theme_name', darkEchartsTheme);
    this.setChartData();
  }
  setChartData() {
    const option = {
      color: ['#6b43de', '#4d8fea', '#eb6739', '#fedd28', '#1ed3d8', '#319fa7'],

      tooltip: {
        trigger: 'item',
        triggerOn: 'mousemove'
      },
      series: {
        type: 'sankey',
        layout: 'none',
        focusNodeAdjacency: true,
        itemStyle: {
          normal: {
            borderWidth: 1,
            borderColor: '#aaa'
          }
        },
        lineStyle: {
          normal: {
            color:'#FFFFFF',
            curveness: 0.5
          }
        },
        label: {
          textStyle: {
            color: '#FFFFFF'
          }
        },
        data: [{
          name: '从上海'
        },
        {
          name: '从南京'
        },{
          name: '从杭州'
        },{
          name: '从合肥'
        },{
          name: '到南京'
        }, {
          name: '到杭州'
        }, {
          name: '到合肥'
        }, {
          name: '到苏州'
        }, {
          name: '到宁波'
        }, {
          name: '到嘉兴'
        }, {
          name: '到南通'
        }, {
          name: '到无锡'
        }, {
          name: '到常州'
        }],
        links: [{
          source: '从上海',
          target: '到苏州',
          value: 100
        }, {
          source: '从上海',
          target: '到常州',
          value: 15
        }, {
          source: '从上海',
          target: '到合肥',
          value: 33
        }, {
          source: '从上海',
          target: '到嘉兴',
          value: 33
        }, {
          source: '从上海',
          target: '到南京',
          value: 46
        }, {
          source: '从上海',
          target: '到南通',
          value: 29
        }, {
          source: '从上海',
          target: '到无锡',
          value: 27
        }, {
          source: '从上海',
          target: '到杭州',
          value: 69
        }, {
          source: '从上海',
          target: '到宁波',
          value: 49
        },
        {
          source: '从南京',
          target: '到常州',
          value: 19
        },
        {
          source: '从南京',
          target: '到杭州',
          value: 8
        },
        {
          source: '从南京',
          target: '到合肥',
          value: 9
        },
        {
          source: '从南京',
          target: '到上海',
          value: 52
        },
        {
          source: '从南京',
          target: '到苏州',
          value: 48
        },
        {
          source: '从南京',
          target: '到无锡',
          value: 20
        },
        {
          source: '从杭州',
          target: '到合肥',
          value: 7
        },
        {
          source: '从杭州',
          target: '到嘉兴',
          value: 12
        },
        {
          source: '从杭州',
          target: '到南京',
          value: 6
        },
        {
          source: '从杭州',
          target: '到常州',
          value: 1
        },
        {
          source: '从杭州',
          target: '到宁波',
          value: 18
        },
        {
          source: '从杭州',
          target: '到上海',
          value: 26
        },
        {
          source: '从杭州',
          target: '到苏州',
          value: 5
        },
        {
          source: '从合肥',
          target: '到南京',
          value: 5
        },
        {
          source: '从合肥',
          target: '到嘉兴',
          value: 0.6
        },
        {
          source: '从合肥',
          target: '到南通',
          value: 0.7
        },
        {
          source: '从合肥',
          target: '到杭州',
          value: 2
        },
        {
          source: '从合肥',
          target: '到宁波',
          value: 3
        },
        {
          source: '从合肥',
          target: '到上海',
          value: 18
        },
        {
          source: '从合肥',
          target: '到无锡',
          value: 1
        },
        {
          source: '从合肥',
          target: '到苏州',
          value: 2
        }
        ]
      }
    };
    this.setState({ chartOption: option });
  }

  render() {
    const { style, width, height } = this.props;
    const dtTitle = `省会城市异地消费`;
    const { chartOption } = this.state;
    return createPortal(
      <div
        style={{
          ...style,
          display: 'flex',
          flexDirection: 'column',
          width: width,
          height: height,
          color: '#fff',
          backgroundColor: 'rgba(0,0,0,0.6)',
          boxShadow: '0 1px 2px rgba(0,0,0,0.16), 0 1px 2px rgba(0,0,0,0.23)',
        }}
      >
        <div
          style={{
            lineHeight: '35px',
            height: 35,
            borderBottom: '1px solid rgb(238, 238, 238,0.2)',
            textAlign: 'center',
            fontWeight: 'bold'
          }}
        >
          <div style={{ float: 'left', marginLeft: 6, fontSize: 15 }}><div style={{ float: 'left', width: 5, height: 35, marginRight: 10, backgroundColor: 'rgba(63,177,277,1)', }} />{dtTitle}</div>
          <div style={{ float: 'right', marginRight: 8 }}>
          </div>
        </div>
        <div style={{ margin: '3px 8px 3px 8px' }}>
          <div>
            {chartOption !== undefined && (
              <ReactEcharts
                option={chartOption}
                notMerge={true}
                lazyUpdate={true}
                theme={'theme_name'}
                style={{ height: this.state.chartHeight }}
              />
            )}
          </div>
        </div>
      </div>,
      this.el
    );
  }
}

export default LivelyhoodPayTopChart;
